
import React, { PureComponent } from 'react'
import { Row, Col } from 'antd';
import PageBackHeader from "@common/PageBackHeader";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { withRouter } from 'react-router-dom'
import {getHistoryMatchParams} from "@utils/setUrlQuery";

@withRouter
class CheckInventoryDetail extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        this.state = {
            order_number: id,
            detail: state
        }
    }

    render() {
        const { detail } = this.state
        let total = 0
        detail.data.map(item => {
            total = total + (item.input_quantity || 0)
        })
        const columns = [{
            title: '商品',
            dataIndex: 'name',
            render: (text, record) => record.remark.name
        }, {
            title: '商品类型',
            dataIndex: 'prod_type_name',
            render: (text, record) => record.remark.type
        }, {
            title: '数量',
            dataIndex: 'input_quantity',
        }];
        return (
            <div className="bilin-web">
                <PageBackHeader title='盘点详情' />
                <div className="bilin-web-body">
                    <div className="warehouse-check-inventory-page">
                        <div className='inventory-detail'>
                            <Row className="check-line">
                                <Col span={2}>
                                    <span className='ft-clr-d'>单据编号:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.order_number}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>盘点仓库:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.warehouse_name}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>创建人:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.submitter}</span>
                                </Col>
                            </Row>
                            <Row className="check-line">
                                <Col span={2}>
                                    <span className='ft-clr-d'>创建时间:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.create_time}</span>
                                </Col>
                                <Col span={2}>
                                    <span className='ft-clr-d'>盘点时间:</span>
                                </Col>
                                <Col span={6}>
                                    <span className='ft-clr-d'>{detail.submit_time}</span>
                                </Col>
                            </Row>
                        </div>
                        <div className="warehouse-product-list-module">
                            <div className="mgb-16">
                                <span className='mgr-16 ft-16 ft-w600'>商品明细</span>
                                <span>共 <span className='ft-w600 ft-16'>{detail.data.length}</span> 种商品, 数量: <span className='ft-w600 ft-16'>{total}</span></span>
                            </div>
                            <CustomizeTableProvide ref={this.tableRef} tableKey="stockList" onChange={() => { }}>
                                <div className="table-list">
                                    <CustomizeTable
                                        columns={columns}
                                        dataSource={detail.data || []}
                                        pagination
                                    />
                                </div>
                            </CustomizeTableProvide>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
}

export default CheckInventoryDetail